/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    Text,
    useTheme,
    Container,
    Button,
    IconArrowRight,
    Input,
    Select,
    CheckSwitch,
    LineColumn,
    SuffixInput,
    InputLine,
    ComboBoxDatalist,
    InputDatalist,
    CommitInput,
    TextArea,
    ButtonRefComp,
    IconButton,
    IconZapOff,
    IconCheckSquare,
    ListFlexRow,
    Itext,
    IconCoffee,
    InputPure
} from "customize-easy-ui-component";
//import { DialogEnterReturn } from "../../context/DialogEnterReturn";
//import queryString from "querystring";
// import {useCommnBaseParm, CommnBase} from "./CommnBase";
import {useContext, useRef} from "react";
import {ChooseEqps} from "../../comp/ChooseEqps";
import useFlowToMutation from "../hook/useFlowRequestMutation";
import {OneUserChoose} from "../../common/user/OneUserChoose";
import RoutingContext from "../../routing/RoutingContext";
import {使用状态s} from "../../pipeline/edit/管道单元";
import UserContext from "../../routing/UserContext";
import {ChooseUnit} from "../../unit/ChooseUnit";
import useClipboard from "react-use-clipboard";
import {Link as RouterLink} from "../../routing/Link";
import {taskStatusMap} from "../../task/TaskList";
import {businessTypeMap} from "../../device/edit/CommnBase";
import {eqpTypeAllMap} from "../../dict/eqpComm";
import {设备单位关联类型s} from "./DeviceUnits";
import food from "../../images/food.svg";
// import HashLinkObserver from "react-hash-link";

// export const 设备单位关联类型s=[['useu','使用单位'],['owner','产权单位'],['mtu','维保单位']];

interface Props {
  // id?: string;
  readOnly?: boolean;
  editable?: boolean;
  //当前申请单数据
  req?:any;
  //去修改设备数据
  //setEqp:  React.Dispatch<React.SetStateAction<any>>;
  //graphQL的变更执行回调函数 (...args: any[]) => any
  mutationFunc: (...args: any[]) => any;
    //当前待办流转单
    curFlow?:any;
}
/**中止监检 设备清单 要初始化，后续修正录入。
 * Task-Eqp没关联监察告知单的要特意输入告知日期。说明:全部设备列出：序号$告知日期;安装改造大修都得有{关联监察#}：设备基本情况施工准入资格和人员取证等的准许意见通知=书面告知监察事前许可。
 * 不用打印，电子形式通告的话： 后处理：施工单位短信通知，使用单位短信；
 *             》》 直接通知到施工单位：？需要打印和发放吗:收件人：(要走电子形式)， > 需要抄送 附带+发送{短信通知使用单位到位} 打印2份;
 * 打印发放请求；#还是直接整合在同一个申请单 流程中？ ￥【关键看时间周期】 尽量能够短时间走完流程的￥
 *  单独的报告(中止监检通知书等)打印和发放给客户的请求？$打印1层$：检验负责人申请 :选定归属的打印中心User->[打印归档操作人员->只需要快递发出去了(快递单号)就可以当成做完了]：结束流程。
 *  假如: 快递没有实际上被客户接受的？负反馈机制不走流程(流程已经END)，走异常状态机制(补发报告需求)吗？
 *  无需打印的发放给客户？： 还需要申请发送报告书链接给使用单位吗，报告终结步骤：直接发送一个短信通知链接可查看报告。
 * */
export const StopInspec: React.FunctionComponent<Props> = (
    {
       readOnly,
       editable,
       req=null,    //【只读的】:从好几代祖先前的DetailedGuide在graphQL获得后端服务器数据层层传递下来的。
      mutationFunc,
        curFlow,
     }) =>
{
  //这个位置就应该体现解析graphQL内省的json集合字段：data:{}从string变身对象。
  const theme = useTheme();
    const { history } = useContext(RoutingContext);
  const {save, field, reurl}= window.history.state?.state??{};      //通用伪对话框传递格式:多选设备返回对象
    //假如从多选选定设备页面返回的："移出多选集" : "加入多选集" 操作过后，将会导致save.devs[]对象变身成了设备页面的经过SessionStorage倒腾一手的对象。
  const edt = save?  save : req;
  //若从save恢复的，confirm已经解析为对象Object:
  let  dat = edt?.dat instanceof Object?  edt?.dat : JSON.parse(edt?.dat || '{}');
  const [理由, set理由] = React.useState(dat?.理由);
    const [repNO, setRepNO] = React.useState(dat?.repNO);
    const [sttype, setSttype] = React.useState(dat?.sttype);
    const [项目名, set项目名] = React.useState(dat?.项目名);
    const [中止日, set中止日] = React.useState(dat?.中止日);

    // const [taskId, settaskId] = React.useState(dat?.taskId);
  //【琢磨】仅仅存在于短期流程活动使用的需要结构化吗？成本和收益对比？,本来应当是关联对象的却被非结构化，graphQL没办法内省的，片段快照某些关键字段？？
    //非结构化关联对象的和正常JPA关联对象的优缺点对照： 前者适合于频繁新增删除的，关系生存时间短暂的，后端基本不参与计算的。
    //因为ChooseEqps对话框选择设备之后返回的实际数据字段通常是save.devs而不是我这非结构化json存储到了dat:{devs{[]}}，所以需要转换 #前提条件save?.devs表示挑选设备列表伪对话框之后调回来的。
    const [devs, setDevs] = React.useState(save?.devs? save.devs : dat?.devs);
    // const [unitZd, setUnitZd] = React.useState(dat?.unitZd || 'useu');
    //因为servu为对方框原本预计并非是在dat{servu:{}}这个结构里面的# 只好这样转换了 save? save.devs : 多个为对话框的混淆逻辑问题 【预设不应该有dat{}非结构化】
    //注意@前提：假定save.servu必须时选择了单位从伪对话框返回的。
    // const [servu, setServu] = React.useState(save?.servu? save.servu : dat?.servu);
    const [ust, setUst] = React.useState(dat?.ust);

  //console.log("ChooseUnit跑来8history=",history, "location==",history.location);
/* const mountedRef = useRef(false);
  if(!mountedRef.current) {
    console.log("电梯Z组件当前id=",id,"未初始化￥=",mountedRef.current);
    mountedRef.current = true;
  }
  else   console.log("电梯Z组件当前id=",id,"已经初始化了=",mountedRef.current);*/

  // console.log("电梯组件传递x参数来svp Nowneqp=",req, "save=",save, cbp);
  //   const curFlow=sessionStorage['审批单']&&JSON.parse(sessionStorage['审批单']);
    const {call:flowToFunc,doing:flowing, called:flowed, reset:flowreset}=useFlowToMutation();
    //第二关批准人，或者唯一关的审核人； 语义上问题：若2关口的话那么打印发放人员反而是通常意义的最终核准人了, 别扭，通用申请单想要统一语义？通用申请单过滤统计用处不大?。
    const [auditor, setAuditor] = React.useState<any>(req?.auditor);
    const [director, setDirector] = React.useState<any>(req?.director);
    //有2关审批的算是第1关的审核人；
    const [manager, setManager] = React.useState<any>(req?.manager);
    const {user} = useContext(UserContext);
    const  audat = JSON.parse(edt?.audat || '{}');
    const [memo, setMemo] = React.useState<string|undefined>(audat?.memo);
    const  drdat = JSON.parse(edt?.drdat || '{}');
    const [drmemo, setDrmemo] = React.useState<string|undefined>(drdat?.memo);
    const  mndat = JSON.parse(edt?.mndat || '{}');
    const [mnmemo, setMnmemo] = React.useState<string|undefined>(mndat?.memo);
    const floUrl='/request/'+ req?.id;
    const urlouter=`${process.env.REACT_APP_WEB}/free/stopInspec/`+ req?.id;
    const commitBlurRef =React.useRef<HTMLDivElement | null>(null);
    const [isCopied, setCopied] = useClipboard(urlouter);    //其它申请单关联了本申请单地情况。
    //为了修改可以在React页面立刻同步显示需要的，不能直接修改原数组对象。 腾挪dat?.devs到了ispdvs：受编辑器控制的
    const [ispdvs, setIspdvs] = React.useState<[any]>(dat?.devs);
    //不需要0所以下面的<InputPure type="number" value={ fseq || ''}，若要0取值的要改成value={ fseq || '0'}才能显示为0的。
    const [fseq, setFseq] = React.useState<number|undefined>();
    const [tseq, setTseq] = React.useState<number|undefined>();
    const [date1, setDate1] = React.useState<any>();
    const [dvtxt, setDvtxt] = React.useState<string>();
    const [邮寄地, set邮寄地] = React.useState(dat?.邮寄地);
    const [收件人, set收件人] = React.useState(dat?.收件人);
    const [电话, set电话] = React.useState(dat?.电话);
    const [phone, setPhone] = React.useState(dat?.phone);
    //【注意】Select组件必须加上<option></option>否则默认第一条,后端可能根本就没有数据 也显示默认第一条。
    //【关键】字段：在首次发起流程或者退回到编制申请重新提交时刻，send取值决定了BPMN的审批是2层的还是1层审批人的。
    const [send, setSend] = React.useState(dat?.send);

    async function confirmation() {
        //后端生成，前端编辑器却没有保存的字段，透明传递给通知书的。
        const{使用单, 服务单, 设备种}= dat;
        //后端最开始就已经初始化的 也要一起打包dat{JSON}回传 ?前端篡改 何意义?
        const newdat={
            dat: {
                理由, taskId: dat?.taskId, devs: ispdvs, sttype, 项目名, 中止日,
                邮寄地, 收件人, 电话, phone, send,
                使用单, 服务单, 设备种,
            },
        };
        //伪对话框跳转恢复也会用到的。
        return newdat;
    }

  return (
    <div
      css={{
        [theme.mediaQueries.md]: {
          height: "auto",
          display: "block"
        }
      }}
    >
      <Text
        css={{
          flex: 1,
          textAlign: "center",
          [theme.mediaQueries.md]: {
            textAlign: "left"
          }
        }}
        wrap={true}
        variant="h5"
        gutter={false}
      >
        审批通过后，可进入中止监检通知书链接，也可打印发放
      </Text>

      <div
        css={{
          flex: 1,
          [theme.mediaQueries.md]: {
            flex: "none"
          }
        }}
      >
        <div>
          <Container>
            <div
              css={{
                paddingTop: theme.spaces.lg,
                paddingBottom: theme.spaces.lg
              }}
            >
                <Text variant="h6">第一步，提交材料:</Text>
                <Text>该任务设备清单,有{ispdvs.length}台：</Text>
                {ispdvs.map( (one :any, i: number) => {
                    return (
                            <ListFlexRow key={i}
                                onPress={(e) => {
                                    history.push('/device/'+one?.id+'/');
                                    e?.preventDefault();
                                }}
                            >
                                <Text>{i+1}</Text>
                                <Itext>{one?.titl || ' '}</Itext>
                                <Itext>{ one?.model || ' '}</Itext>
                                <Itext>{ one?.fno || ' '}</Itext>
                                <Itext>{ one?.nfDate || '日'}</Itext>
                                <Itext>{ one?.备注 || '注'}</Itext>
                                <Text>{ one?.address || ' '}</Text>
                            </ListFlexRow>
                    );
                })}
                <Text>输入序号范围，修改部分数据：</Text>
                <LineColumn column={3}>
                    <InputLine label={`序号:`}>
                        <div css={{
                            display: 'flex',
                            alignItems: 'baseline',
                        }}>
                            <InputPure type="number" value={ fseq || ''}  placeholder="从第几个开始"
                                        onChange={e => setFseq( Number(e.currentTarget.value) ) } />
                            至
                            <InputPure type="number" value={ tseq || ''} placeholder="第几个结束，省略算单个"
                                        onChange={e => setTseq( Number(e.currentTarget.value) ) } />
                        </div>
                    </InputLine>
                    <InputLine label={`告知日期:`}>
                        <Input type='date'  value={ date1  || ''}
                               onChange={e => setDate1( e.currentTarget.value||undefined ) } />
                    </InputLine>
                    <InputLine label={`备注:`}>
                        <CommitInput  value={ dvtxt || ''}  onSave={txt => setDvtxt( txt || undefined) } />
                    </InputLine>
                </LineColumn>
                <div css={{
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'space-evenly',
                }}>
                    <Button disabled={ !fseq || fseq<=0 || (tseq!>0 && fseq>tseq!) || fseq>ispdvs.length || tseq!>ispdvs.length}
                                onClick={async () => {
                                    //let obnew= dat?.devs![0]; ispdvs.splice(1, 1, obnew);这个方式修改数据但是React页面不会确保尽快更新的。 浅层拷贝比较
                                    let tend= tseq? tseq : fseq!;
                                    for (var i =fseq!-1; i < tend; i++) {
                                        let obnew= ispdvs[i];
                                        obnew.nfDate= date1;
                                        ispdvs.splice(i, 1, obnew);
                                    }
                                    setIspdvs([ ...ispdvs ] );        //数据模式的! 必须加，否则延迟，其它输入变了后其他元素触发render才会刷新显示。
                                }}
                    >改告知日期
                    </Button>
                    <Button disabled={ !fseq || fseq<=0 || (tseq!>0 && fseq>tseq!) || fseq>ispdvs.length || tseq!>ispdvs.length}
                            onClick={async () => {
                                let tend= tseq? tseq : fseq!;
                                for (var i =fseq!-1; i < tend; i++) {
                                    let obnew= ispdvs[i];
                                    obnew.备注= dvtxt;
                                    ispdvs.splice(i, 1, obnew);
                                }
                                setIspdvs([ ...ispdvs ] );
                            }}
                    >备注下
                    </Button>
                </div>

                <LineColumn column={3}>
                    <InputLine label={`中止类型:`}>
                        <Select inputSize="md"  value={ sttype || ''}
                                onChange={e => setSttype( e.currentTarget.value||undefined ) } >
                            <option></option>
                            <option>在监察告知半年后未安装</option>
                            <option>安装过程因客观因素停工</option>
                            <option>设备安装基本完成未申请竣工验收</option>
                            <option>各类试验不合格3个月内未整改</option>
                            <option>其他</option>
                        </Select>
                    </InputLine>
                  <InputLine label={`项目名称:`}>
                    <CommitInput  value={ 项目名 || ''}  onSave={txt => set项目名( txt || undefined) } />
                  </InputLine>
                    <InputLine label={`监检中止日期:`}>
                        <Input type='date'  value={ 中止日  || ''}
                               onChange={e => set中止日( e.currentTarget.value||undefined ) } />
                    </InputLine>
                    <InputLine label={`任务链接:`}>
                        <RouterLink href={"/task/"+dat?.taskId}>
                            <Text>/task/{dat?.taskId}</Text>
                        </RouterLink>
                    </InputLine>
                    <InputLine label={`申请原因:`}>
                        <TextArea required rows={4}
                                  value={理由} onChange={e => set理由( e.currentTarget.value||undefined ) }
                        />
                    </InputLine>
                    <InputLine label={`申请邮寄地址:`}>
                        <CommitInput  value={ 邮寄地 || ''}  onSave={txt => set邮寄地( txt || undefined) } />
                    </InputLine>
                    <InputLine label={`申请收件人:`}>
                        <CommitInput  value={ 收件人 || ''}  onSave={txt => set收件人( txt || undefined) } />
                    </InputLine>
                    <InputLine label={`申请收件手机:`}>
                        <CommitInput  value={ phone || ''}  onSave={txt => setPhone( txt || undefined) } />
                    </InputLine>
                    <InputLine label={`申请收件电话:`}>
                        <CommitInput  value={ 电话 || ''}  onSave={txt => set电话( txt || undefined) } />
                    </InputLine>
                    <InputLine label={`申请发放方式(不打印的选线上):`}>
                        <Select inputSize="md"  value={ send || ''}
                                onChange={e => setSend( e.currentTarget.value||undefined ) } >
                            <option></option>
                            <option>线上告知</option>
                            <option>自取</option>
                            <option>快递</option>
                            <option>挂号</option>
                            <option>邮政小包</option>
                            <option>代领</option>
                        </Select>
                    </InputLine>
                 </LineColumn>

                {
                    (req?.status==='INIT') &&
                      <Button size="lg" intent="primary"  iconAfter={<IconArrowRight />}
                              css={{ marginTop: theme.spaces.sm, whiteSpace:'unset' }}
                              disabled={req?.status !== 'INIT'}
                        onPress={ async () => {
                          const sendInp=await confirmation();
                          const inpPreare={ ...sendInp,
                              dat: JSON.stringify({...sendInp.dat}),
                          };
                          await mutationFunc(req?.id, 'UPD', inpPreare);
                        } }
                      > 先保存申请资料
                      </Button>
                }
            </div>

              <InputLine label='暂停监检的审核人:'>
                  { (req?.status==='INIT') ?
                      <>
                      {send==='线上告知'?
                          <OneUserChoose name={auditor?.person?.name!} setEditorVar={setAuditor}
                                     oobj={auditor}/>
                          :
                          <OneUserChoose name={manager?.person?.name!} setEditorVar={setManager}
                                         oobj={manager}/>
                      }
                      </>
                      :
                      <Text css={{textAlign: "left"}}>{send==='线上告知'? auditor?.person?.name : manager?.person?.name}</Text>
                  }
              </InputLine>

              { (req?.status==='INIT' || (curFlow && curFlow?.entId === req?.id && curFlow?.tdId==='request_author_modify') ) &&
                  <Button intent="primary" disabled={(curFlow && !(curFlow?.entId === req?.id) && req?.status!=='INIT') ||
                         (send==='线上告知'? !auditor : !manager ) }
                        onPress={async () => {
                                if(send==='线上告知')
                                     await flowToFunc(curFlow?.utId, req?.id,3,"", "YES","暂停监检申请:"+user?.person?.name,
                                          auditor?.id, floUrl, 120);
                                else
                                    await flowToFunc(curFlow?.utId, req?.id,2,"", "YES","暂停监检申请:"+user?.person?.name,
                                        manager?.id, floUrl, 120);
                              sessionStorage['审批单'] = null;
                              history.push(`/zeebeTodo`);
                        }}
                  >
                      { ((curFlow?.tdId==='request_author_modify')? '再提交申请' : '提交申请给审核人') }
                  </Button>
              }

              <Text variant="h6">第二步，审核人的审核情况：</Text>
              {  ((curFlow && curFlow?.entId === req?.id) || req?.status!=='INIT') &&
                  <InputLine label={`审核人的意见:`}>
                      { ((curFlow?.tdId==='request_auditor_opinion' && send==='线上告知') || curFlow?.tdId==='request_manager_opinion') ?
                          <>
                          { send==='线上告知'?
                              <CommitInput  value={ memo || ''}  onSave={txt => setMemo( txt || undefined) }
                                            placeholder="如果拒绝或回退的，请给出理由"
                              />
                              :
                              <CommitInput  value={ mnmemo || ''}  onSave={txt => setMnmemo( txt || undefined) }
                                            placeholder="如果拒绝或回退的，请给出理由"
                              />
                          }
                          </>
                          :
                          <Text css={{textAlign: "left"}}>{send==='线上告知'? memo : mnmemo}</Text>
                      }
                  </InputLine>
              }
              {send!=='线上告知' &&
                  <InputLine label='打印和发放人员:'>
                      { curFlow?.tdId==='request_manager_opinion' ?
                          <OneUserChoose name={auditor?.person?.name!} setEditorVar={setAuditor}
                                         oobj={auditor}/>
                          :
                          <Text css={{textAlign: "left"}}>{auditor?.person?.name}</Text>
                      }
                  </InputLine>
              }

              { (curFlow?.entId === req?.id && ((curFlow?.tdId==='request_auditor_opinion' && send==='线上告知') || curFlow?.tdId==='request_manager_opinion')) &&
                  <>
                      <Button intent="primary" disabled={curFlow && !(curFlow?.entId === req?.id)}
                              onPress={async () => {
                                  const opndat= req?.status==='INIT' ? '' :
                                      JSON.stringify(send==='线上告知'? {memo} : {memo:mnmemo});
                                  await flowToFunc(curFlow?.utId, req?.id,3,opndat, "YES","暂停监检申请:"+user?.person?.name,
                                      send==='线上告知'? null : auditor?.id, null, 40);
                                  sessionStorage['审批单'] = null;
                                  history.push(`/zeebeTodo`);
                              }}
                      >
                      { send==='线上告知'? '通过的允许中止' : '通过的流转给打印发放人' }
                      </Button>
                      {
                          (req?.status!=='INIT') &&
                          <>
                              <Button intent="primary" css={{marginLeft: theme.spaces.sm}}
                                      disabled={curFlow && !(curFlow?.entId === req?.id)}
                                      onPress={async () => {
                                          const opndat=JSON.stringify(send==='线上告知'? {memo} : {memo:mnmemo});
                                          await flowToFunc(curFlow?.utId, req?.id,3,opndat, "NO","暂停监检申请:"+user?.person?.name,
                                              auditor?.id, null, 30);
                                          sessionStorage['审批单'] = null;
                                          history.push(`/zeebeTodo`);
                                      }}
                              >
                                  { '审批不通过' }
                              </Button>
                              <Button intent="primary" css={{marginLeft: theme.spaces.sm}}
                                      disabled={curFlow && !(curFlow?.entId === req?.id)}
                                      onPress={async () => {
                                          const opndat=JSON.stringify(send==='线上告知'? {memo} : {memo:mnmemo});
                                          await flowToFunc(curFlow?.utId, req?.id,3,opndat, "BACK","暂停监检申请:"+user?.person?.name,
                                              auditor?.id, null, 30);
                                          sessionStorage['审批单'] = null;
                                          history.push(`/zeebeTodo`);
                                      }}
                              >
                                  { '退回' }
                              </Button>
                          </>
                      }
                  </>
              }

              {send!=='线上告知' &&
                <>
                  <Text variant="h6">第三步，打印发放人员接受并处理：</Text>
                  {  ((curFlow && curFlow?.entId === req?.id) || req?.status!=='INIT') &&
                      <InputLine label={`打印发放完成情况:`}>
                          {
                              (curFlow?.entId === req?.id && curFlow?.tdId==='request_auditor_opinion') ?
                                  <TextArea required rows={3}  placeholder="快递单号也请捎上"
                                            value={memo} onChange={e => setMemo( e.currentTarget.value||undefined ) }
                                  />
                                  :
                                  <Text css={{textAlign: "left"}}>{memo}</Text>
                          }
                      </InputLine>
                  }

                  { (curFlow?.entId === req?.id && curFlow?.tdId==='request_auditor_opinion') &&
                      <>
                          <Button intent="primary" disabled={curFlow && !(curFlow?.entId === req?.id)}
                                  onPress={async () => {
                                      const opndat= req?.status==='INIT' ? '' :
                                          JSON.stringify({memo,});
                                      await flowToFunc(curFlow?.utId, req?.id,2,opndat, "YES","暂停监检申请:"+user?.person?.name,
                                          null, null, 40);
                                      sessionStorage['审批单'] = null;
                                      history.push(`/zeebeTodo`);
                                  }}
                          >
                              { '已打印且文书发放也完成' }
                          </Button>
                          {
                              (req?.status!=='INIT') &&
                              <>
                                  <Button intent="primary" css={{marginLeft: theme.spaces.sm}}
                                          disabled={curFlow && !(curFlow?.entId === req?.id)}
                                          onPress={async () => {
                                              const opndat=JSON.stringify({memo,});
                                              await flowToFunc(curFlow?.utId, req?.id,2,opndat, "NO","暂停监检申请:"+user?.person?.name,
                                                  null, null, 30);
                                              sessionStorage['审批单'] = null;
                                              history.push(`/zeebeTodo`);
                                          }}
                                  >
                                      { '本环节拒绝' }
                                  </Button>
                                  <Button intent="primary" css={{marginLeft: theme.spaces.sm}}
                                          disabled={curFlow && !(curFlow?.entId === req?.id)}
                                          onPress={async () => {
                                              const opndat=JSON.stringify({memo,});
                                              await flowToFunc(curFlow?.utId, req?.id,2,opndat, "BACK","暂停监检申请:"+user?.person?.name,
                                                  null, null, 30);
                                              sessionStorage['审批单'] = null;
                                              history.push(`/zeebeTodo`);
                                          }}
                                  >
                                      { '退回' }
                                  </Button>
                              </>
                          }
                      </>
                  }
                </>
              }

            { (curFlow?.entId === req?.id && (curFlow?.tdId==='request_deny' || curFlow?.tdId==='request_finish')) &&
                <>
              <Button intent="primary" disabled={curFlow && !(curFlow?.entId === req?.id)}
                      onPress={async () => {
                          await flowToFunc(curFlow?.utId, req?.id,1,'', "YES");
                          sessionStorage['审批单'] = null;
                          history.push(`/zeebeTodo`);
                      }}
              >
                {'知道了'}
              </Button>
                </>
            }
              <RouterLink　href={'/free/stopInspec/'+ req?.id}>
                  <Text variant="h4">{req?.status!=='END'? '预览(或发放打印)相应的' : '客户打印正式的'}中止监检通知书</Text>
              </RouterLink>
              { req?.status==='END' &&
                  <InputLine  label='复制通知书链接：'>
                      <div>
                          <SuffixInput id="diame"  readOnly  onSave={txt=> 0}
                                       type="text"  value={urlouter || ""}>
                              <IconButton
                                  variant="ghost"
                                  icon={isCopied ? <IconZapOff /> : <IconCheckSquare />}
                                  label="搜索吧"
                                  onClick={async (e) => {
                                      setCopied();
                                  } }
                              />
                          </SuffixInput>
                          <Text>点复制链接，给微信等发送通知</Text>
                      </div>
                  </InputLine>
              }
          </Container>
        </div>
      </div>

    </div>
  );
};


